<template>
	<div>

		<!-- 查询条件开始 -->
		<el-form ref="queryForm" :model="search" :inline="true" label-width="68px">
			<el-form-item label="科室名称" prop="deptName">
				<el-input
						v-model="search.deptName"
						placeholder="请输入科室名称"
						clearable
						size="small"
						style="width:240px"/>
			</el-form-item>
			<el-form-item label="状态" prop="status">
				<el-select
						v-model="search.status"
						placeholder="可用状态"
						clearable
						size="small"
						style="width:240px">
					<el-option
							v-for="dict in statusOptions"
							:key="dict.dictValue"
							:label="dict.dictLabel"
							:value="dict.dictValue"/>
				</el-select>
			</el-form-item>
			<el-form-item label="创建时间">
				<el-date-picker
						v-model="search.dateRange"
						size="small"
						style="width:240px"
						value-format="yyyy-MM-dd"
						type="daterange"
						range-separator="-"
						start-placeholde="开始日期"
						end-placeholde="结束日期"/>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="searchData">搜索</el-button>
				<el-button type="primary" icon="el-icon-refresh" size="mini" @click="clearsearch">重置</el-button>
			</el-form-item>
		</el-form>
		<!-- 查询条件结束 -->
		<!-- 表格工具按钮开始 -->
		<el-row :gutter="10" style="margin-bottom: 8px;">
			<el-col :span="1.5">
				<el-button type="primary" icon="el-icon-plus" size="mini" @click="addDept()">新增</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="danger" icon="el-icon-delete" size="mini" @click="bachDel()">批量删除</el-button>
			</el-col>
		</el-row>
		<!-- 表格工具按钮结束 -->

		<!-- 数据表格开始 -->

		<el-table tooltip-effect="dark" style="width: 100%" ref="multipleSelection" border :data="deptTableList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="科室ID" align="center" prop="deptId" />
			<el-table-column label="科室名称" align="center" prop="deptName" />
			<el-table-column label="科室编码" align="center" prop="deptNumber" />
			<el-table-column label="当前挂号量" align="center" prop="regNumber" />
			<el-table-column label="排序码" align="center" prop="orderNum" />
			<el-table-column label="负责人" align="center" prop="deptLeader" />
			<el-table-column label="电话" align="center" prop="leaderPhone" />
			<el-table-column label="状态" prop="status" align="center" :formatter="statusformat" />
			<el-table-column label="创建时间" align="center" prop="createTime" />
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button type="text" icon="el-icon-edit" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
					<el-button type="text" icon="el-icon-delete" size="mini" @click="handleDelete(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 数据表格结束 -->
		<!-- 分页控件开始 -->
		<el-pagination
				v-show="page.total>0"
				:current-page="page.current"
				:page-sizes="[10, 20, 30, 40]"
				:page-size="page.size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="page.total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"/>
		<!-- 分页控件结束 -->
		<!-- 添加修改弹出层开始 -->
		<el-dialog
				:title="title"
				:visible.sync="dialogVisible"
				width="500px"
				center
				append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="100px">
				<el-form-item label="科室名称" prop="deptName">
					<el-input v-model="form.deptName" placeholder="请输入科室名称" clearable size="small" />
				</el-form-item>
				<el-form-item label="科室编码" prop="deptNumber">
					<el-input v-model="form.deptNumber" placeholder="请输入科室编码" clearable size="small" />
				</el-form-item>
				<el-form-item label="挂号开始编号" prop="regNumber">
					<el-input-number v-model="form.regNumber" placeholder="请输入挂号开始编号" clearable size="small" />
				</el-form-item>
				<el-form-item label="负责人" prop="deptLeader">
					<el-input v-model="form.deptLeader" placeholder="请输入负责人" clearable size="small" />
				</el-form-item>
				<el-form-item label="电话" prop="leaderPhone">
					<el-input v-model="form.leaderPhone" placeholder="请输入负责人电话" clearable size="small" />
				</el-form-item>
				<el-form-item label="排序码" prop="orderNum">
					<el-input-number v-model="form.orderNum" clearable size="small" />
				</el-form-item>
				<el-form-item label="状态" prop="status">
					<el-radio-group v-model="form.status">
						<el-radio
								v-for="dict in statusOptions"
								:key="dict.dictValue"
								:label="dict.dictValue"
								:value="dict.dictValue"
						>{{ dict.dictLabel }}</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </span>
		</el-dialog>
		<!-- 添加修改弹出层结束 -->
	</div>
</template>

<script>
	export default {
		data() {
			return {
				//系统状态
				statusOptions:[],
				//部门表单数据
				deptTableList: [],
				//多选框
				multipleSelection: [],
				//查询数据
				search:{},
				//开启添加修改对话框
				dialogVisible: false,
				//对话框标题
				title:'',
				//分页
				page:{
					current:1,
					size:10,
					total:10
				},
				//添加表单
				form: {},
				// 表单校验
				rules: {
					deptName: [
						{ required: true, message: '科室名称不能为空', trigger: 'blur' }
					],
					deptNumber: [
						{ required: true, message: '科室编码不能为空', trigger: 'blur' }
					]
				}
			}
		},
		methods: {
			//加载系统状态
			initStatus() {
				this.$axios.get("system/api/dict/data/findByType/sys_normal_disable").then(r => {
					this.statusOptions = r.data.t;
				})
			},
			//状态字典解析
			statusformat(row){
				let val=row.status;
				return this.formatDict(this.statusOptions,val)
			},

			//重置搜索框
			clearsearch(){
				this.search={};
			},
			//搜索
			searchData(){
				this.page.current=1;
				this.initDeptTable();
			},
			//分页
			handleSizeChange(val) {
				this.page.size=val;
				this.initDeptTable();
			},
			handleCurrentChange(val) {
				this.page.current=val;
				this.initDeptTable();
			},
			//查询部门表单
			initDeptTable(){
				const newParams=Object.assign(this.search,this.page)
				this.$axios.post("/system/api/dept/getAllDept",newParams).then(r => {
					this.deptTableList = r.data.t.records;
					this.page.total=r.data.t.total;
				})
			},
			//表单提交
			handleSubmit() {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						this.$axios.post("/system/api/dept/saveOrUpdate",this.form).then(r=>{
							if (r.data.t){
								this.$message.success(r.data.msg);
							}else {
								this.$message.error("操作失败");
							}
							//查询表单
							this.initDeptTable();
							//关闭弹出层
							this.dialogVisible=false
							this.title='';
						})
					}
				});
			},
			//表单取消
			cancel() {
				this.dialogVisible=false;
			},
			//添加按钮 开启表单
			addDept(){
				if (this.$refs.form != undefined) {
					this.$refs.form.clearValidate();
				}
				this.title='添加部门信息';
				this.dialogVisible=true;
				this.form={regNumber:0,orderNum:0,status:'0'};
			},
			//批量删除
			bachDel(){
				var deptIds=[];
				//遍历表格的数据，再遍历需要在表格中反显的数据，两者的id一致
				this.multipleSelection.forEach((item) => {
					deptIds.push(item.deptId)
				})
				this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios.delete("/system/api/dept/bachDel?deptIds="+deptIds).then(r=>{
						if (r.data.t){
							this.$message.success(r.data.msg);
						}else {
							this.$message.error("操作失败");
						}
						this.page.current=1;
						this.initDeptTable();
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//多选框
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			//行内编辑
			handleUpdate(row) {
				if (this.$refs.form != undefined) {
					this.$refs.form.clearValidate();
				}
				this.title='修改部门信息';
				this.dialogVisible=true;
				this.form =JSON.parse(JSON.stringify(row));
				this.form.deptId=row.deptId;
			},
			//删除行数据
			handleDelete(row) {
				this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios.delete("/system/api/dept/delDate/"+row.deptId).then(r=>{
						if (r.data.t) {
							this.$message.success(r.data.msg);
						} else {
							this.$message.error("操作失败");
						}
						this.page.current = 1;
						this.initDeptTable();
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}
		},
		created() {
			//加载dept表单信息
			this.initDeptTable();
			//加载系统状态
			this.initStatus();
		}
	}
</script>
